<template>
    <div id="index" ref="appRef">
        <div class="bg">
            <dv-loading v-if="loading">Loading...</dv-loading>
            <div v-else class="host-body">
                <div class="d-flex jc-center">
                    <dv-decoration-10 class="dv-dec-10" />
                    <div class="d-flex jc-center">
                        <dv-decoration-8 class="dv-dec-8" />
                        <div class="title">
                            <span class="title-text">{{ title }}</span>
                            <!-- <dv-decoration-6 class="dv-dec-6" :reverse="true" :color="['#50e3c2', '#67a1e5']" /> -->
                        </div>
                        <dv-decoration-8 class="dv-dec-8" :reverse="true"  />
                    </div>
                    <dv-decoration-10 class="dv-dec-10-s" />
                </div>

                <!-- 第二行 -->
                <div class="d-flex jc-between px-2">
                    <div class="d-flex aside-width">
                        <div class="react-right bg-color-blue mr-3" @click="shou">
                            <span class="text fw-b">数据监控</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao">
                            <span class="text fw-b">政务办理</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao2">
                            <span class="text fw-b">事项办理</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao3">
                            <span class="text fw-b">诉求治理</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao4">
                            <span class="text fw-b">调节分析</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao5">
                            <span class="text fw-b">新媒体监管</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao6">
                            <span class="text fw-b">新媒体监管11</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao7">
                            <span class="text fw-b">服务大厅</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao8">
                            <span class="text fw-b">服务办件</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao9">
                            <span class="text fw-b">交易政务</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao10">
                            <span class="text fw-b">服务办理</span>
                        </div>
                        <div class="react-right bg-color-blue mr-3" @click="tiao11">
                            <span class="text fw-b">督查考核</span>
                        </div>
                    </div>
                </div>

                <div class="body-box">

                   <div class="box">
                        <div class="box-left">
                            <dv-border-box-7 style="height: 300px;width: 500px; margin-top: 30px;">
                                 <quhao></quhao>
                            </dv-border-box-7>
                            <dv-border-box-7 style="height: 280px;width: 500px; margin-top: 20px;">
                                <dading></dading>
                            </dv-border-box-7>
                            <dv-border-box-7 style="height: 280px;width: 500px; margin-top: 20px;">
                                <yewupaihang></yewupaihang>
                            </dv-border-box-7>
                        </div>
                        <div class="box-main">
                            <dv-border-box-7 style="height: 600px;width: 700px; margin-top: 30px;transform: translateY(-60px);">
                                
                                <div>
                                    <ServiceCenterDashboard></ServiceCenterDashboard>
                                </div>
                            </dv-border-box-7>
                            <dv-border-box-7 style="height: 300px;width: 750px; transform: translateX(-40px);margin-top: -50px">
                                <div style="display: flex; justify-content: space-between;align-items: center;">
                                    <div style="display: flex; flex-direction: column;width: 250px;">
                                    <dv-border-box-2 style="height: 150px;width: 100%;">
                                        <banshi></banshi>
                                    </dv-border-box-2>
                                    <dv-border-box-2 style="height: 150px;width: 100%;margin-top: 5px;">
                                        <nannv></nannv>
                                    </dv-border-box-2>
                                </div>
                                <div>
                                    <dv-border-box-2 style="height: 290px;width: 250px; ">
                                        <sanshen></sanshen>
                                    </dv-border-box-2>
                                </div>
                                <div>
                                    <dv-border-box-2 style="height: 290px;width: 250px;">
                                        <nannvfenbu></nannvfenbu>
                                    </dv-border-box-2>
                                </div>
                                </div>
                            </dv-border-box-7>
                           
                        </div>
                        <div class="box-right">
                            <dv-border-box-7 style="height: 300px;width: 500px; margin-top: 30px;">
                                <fenxi></fenxi>
                            </dv-border-box-7>
                            <dv-border-box-7 style="height: 280px;width: 500px; margin-top: 20px;">
                                <pinjun></pinjun>
                            </dv-border-box-7>
                            <dv-border-box-7 style="height: 280px;width: 500px; margin-top: 20px;">
                                <shichang></shichang>
                            </dv-border-box-7>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import {
    defineComponent,
    ref,
    reactive,
    onMounted,
    onUnmounted,
} from 'vue'
import { formatTime } from '@/utils/index'
import { WEEK } from '@/constant/index'
import useDraw from '@/utils/useDraw'
import { title, subtitle, moduleInfo } from '@/constant/index'
import CenterLeft1 from '../centerLeft1/index.vue'
import CenterLeft2 from '../centerLeft2/index.vue'
import Center from '../center/index.vue'
import CenterRight1 from '../centerRight1/index.vue'
import CenterRight2 from '../centerRight2/index.vue'
import BottomLeft from '../bottomLeft/index.vue'
import BottomRight from '../bottomRight/index.vue'
import ServiceCenterDashboard from '../sandi/ServiceCenterDashboard.vue'
import StatItem from '../sandi/StatItem.vue'
import shichang from '../sandi/shichang.vue'
import dading from '../sandi/dading.vue'
import quhao from '../sandi/quhao.vue'
import fenxi from '../sandi/fenxi.vue'
import yewupaihang from '../sandi/yewupaihang.vue'
import banshi from '../sandi/banshi.vue'
import pinjun from '../sandi/pinjun.vue'
import nannv from '../sandi/nannv.vue'
import { useRouter } from 'vue-router'
import nannvfenbu from '../sandi/nannvfenbu.vue'
import Nannv from '../sandi/nannv.vue'
import sanshen from '../sandi/sanshen.vue'


export default defineComponent({
    components: {
        CenterLeft1,
        CenterLeft2,
        Center,
        CenterRight1,
        CenterRight2,
        BottomLeft,
        BottomRight,
        ServiceCenterDashboard,
        StatItem,
        quhao,
        dading,
        yewupaihang,
        banshi,
        fenxi,
        shichang,
        pinjun,
        nannv,
        sanshen,
        nannvfenbu
    },
    setup() {
        // * tab切换 颜色背景改变
        const lastChar = location.href.substr(location.href.length - 1)
        const tabColor = ref(lastChar)
        // * 颜色
        const decorationColors = ['#568aea', '#000000']
        // * 加载标识
        const loading = ref<boolean>(true)
        // * 时间内容
        const timeInfo = reactive({
            setInterval: 0,
            dateDay: '',
            dateYear: '',
            dateWeek: ''
        })

        const router = useRouter()


        
        //路由跳转
        const shou = () => {
            router.push("/")
            console.log("跳转成功");
        }

        const tiao = () => {
            router.push("/wzh2")
            console.log("跳转成功");
        }

        const tiao2 = () => {
            router.push("/wzh3")
        }

        const tiao3 = () => {
            router.push("/sjk")
        }

        const tiao4 = () => {
            router.push("/sjk1")
        }
        const tiao5 = () => {
            router.push("/sjk2")
        }
        const tiao6 = () => {
            router.push("/mhr1")
        }
        const tiao7 = () => {
            router.push("/mhr2")
        }
        const tiao8 = () => {
            router.push("/mhr3")
        }
        const tiao9 = () => {
            router.push("/st1")
        }
        const tiao10 = () => {
            router.push("/st2")
        }
        const tiao11 = () => {
            router.push("/st3")
        }


        // * 适配处理
        const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw()
        // 生命周期
        onMounted(() => {
            cancelLoading()
            handleTime()
            // todo 屏幕适应
            windowDraw()
            calcRate()
        })

        onUnmounted(() => {
            unWindowDraw()
            clearInterval(timeInfo.setInterval)
        })

        //点击颜色切换  路由跳转
        const tab = (index) => {
            // console.log(index)
            tabColor.value = index
            router.push(`/tab${index}`)
        }

        // methods
        // todo 处理 loading 展示
        const cancelLoading = () => {
            setTimeout(() => {
                loading.value = false
            }, 500)
        }

        // todo 处理时间监听
        const handleTime = () => {
            timeInfo.setInterval = setInterval(() => {
                const date = new Date()
                timeInfo.dateDay = formatTime(date, 'HH: mm: ss')
                timeInfo.dateYear = formatTime(date, 'yyyy-MM-dd')
                timeInfo.dateWeek = WEEK[date.getDay()]
            }, 1000)
        }

        // return
        return {
            loading,
            timeInfo,
            appRef,
            title,
            subtitle,
            moduleInfo,
            tabColor,
            tab,
            tiao,
            tiao2,
            shou,
            tiao3,
            tiao4,
            tiao5,
            tiao6,
            tiao7,
            tiao8,
            tiao9,
            tiao10,
            tiao11
        }
    }
})
</script>

<style lang="scss" scoped>
@import '@/assets/scss/index.scss';
.box {
    width: 100%;
    height: 100%;
    // background: #f5f5f5;
    display: flex;
    justify-content: space-around;
    .box-left {
        width: 35%;
        height: 100%;
        // background: red;
    }
    .box-main {
        width: 40%;
        height: 100%;
        // background-color: green;
        margin-top: 60px;
        
        // transform: translateX(-100px);
    }
    .box-right {
        width: 35%;
        height: 100%;
        // background: blue; 
        // margin-top: 60px;
    }
}
</style>
